<template>
	<div class="login">
			<form>
				<table>
					<tr>
						<td class="aa">
							<span class="usernamee">
								<van-icon name="user-o" size="20"/>
							</span>
							<input type="text" placeholder="请输入用户名" v-model="username" size="5px">
						</td>
					</tr>
					<tr>
						<td class="aa">
							<span class="pwdd">
								<van-icon name="lock" size="20"/>
							</span>
							<input type="password" placeholder="请输入密码" v-model="pwd">
						</td>
					</tr>
					<tr>
						<td>
							<router-link class="tab-item" to="/Reg">
								<span class="reg">立即注册</span>
							</router-link>
							<span class="fpwd" @click="forget()">忘记密码?</span>
						</td>
					</tr>
					<tr>
						<td>
							<input type="submit" value="登录" class="sub" @click="onSubmitt()">
						</td>
					</tr>
				</table>
			</form>
		
	</div>
</template>

<script>
	import {Toast} from 'vant';	
	import axios from 'axios';
	var querystring = require('querystring');
	export default{
		name:"login",
		data(){
			return{
				username:'',		//用户名
				pwd:'',				//密码
			};
		},
		methods:{
			onClickLeft() {
			      Toast('返回');
				  this.$router.push({path:'Search'});
			    },
			onClickRight() {
			      Toast('按钮');
			},
			forget(){
				this.$router.push({path:'Forget'})
			},
			onSubmitt(){
				console.log(this.username),
				alert(this.pwd)
				var param={
					'username':this.username,
					'pwd':this.pwd,
				};
				//querystring.stringify（）这种是将数据转成form data的形式
				param = querystring.stringify(param);
				axios.post(this.$api+'/user/login',param).then((response)=>{
					if(response.data.success==true){
						//存储前台和后台数据()键值对形式,并将后台的json数据转化成String类型
						localStorage.setItem('data-mine',JSON.stringify(response.data));	
						// 登陆成功后跳转页面
						Toast(response.data.msg);
						console.log(response.data);	//本行目的为验证数据，可省略
						console.log(JSON.parse(localStorage.getItem('data-mine')));	//本行目的为验证数据，可省略
						console.log('登陆成功');
						this.$router.push({path:'Mine'});
					}else{
						Toast(response.data.msg);
						console.log('登陆失败');
						this.$router.push({path:'/'});
					}
				}).catch((error) => {
					//this.$message.error('请求失败');
					console.log(error);
				});	
			}
		}
	}
</script>

<style scoped>
	.login{
		margin: 10px;
		background-color: #FAFAFA;
		width:345px;
		height: 600px;
		background: url('~@/assets/login.png');
		position: relative;
	}
	.img{
		width: 100%;
		height: 100px;
		background-color: #FAFAFA;
	}
	.icon{
		width: 20px;
		height: 20px;
	}
	form{
		/* border: 1px solid black; */
		position: relative;
		width: 320px;
		height: 200px;
		top: 200px;
		border-radius: 10px;
	}
	table{
		/* border: 1px solid black; */
		position: relative;
		top:40px;
		left: 40px;
	}
	.bu{
		margin-left: 40px;
	}
	/* .pwd{
		background: url('~@/assets/lock.png') 20px 20px no-repeat;
	} */
	input{
		width:210px;
		margin-top: 10px;
		outline: none;
		border-radius: 5px;
		border: none;
	}
	span{
		font-size: 5px;
		color: #C8C9CC;
		padding-left: 5px;
	}
	.aa{
		border: 1px solid #2C3E50;
		border-radius: 10px;
	}
	.reg{
		margin-right: 90px;
		
	}
	.sub{
		border: none;
		background-color: #F2F3F5;
		width: 150px;
		line-height: 25px;
	}
</style>
